import React from 'react';
import { Button, Row, Col, message, Tooltip, Select, Input } from 'antd';
import { connect } from 'react-redux';
import CommonListsIndex from '../../../components/CommonLists/index';
import Modal from '../../../components/Modal/index';
import CopyField from './copyField';
import { IS_SYSTEM, AUDIT } from '../../../utils/constant';
import SearchBar from '../../../components/SearchBar';
import services from '../../../services/api';
import { getFeildByTreeData } from '../../../utils/utils';
import { VARS_TYPE_LIST } from '../../../utils/constant';
import VarAdd from './add';
import VarList from './list';
import Sort from './Sort';

@connect(mapStateToProps)
class VarIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'vars';
    this.addComponent = VarAdd;
    this.editComponent = VarAdd;
    this.listsComponent = VarList;
    this.state = {
      varList: [],
    };
  }
  componentDidMount() {
    this.getSearchVarList();
    const locationState = this.props.history.location;
    if (locationState.state && locationState.state.name) {
      this.queryParams.projectName = locationState.state.name;
    }
    this.freshQueryList();
  }

  // 获取变量分类
  getSearchVarList = async () => {
    const varList = await this.getVarList({
      orgCode: '',
      projectCode: '',
    });
    this.setState({ varList });
  };

  getVarList = async (params = {}) => {
    try {
      const { data, code } = await services.sort.listNoPage(params);
      if (code === '0') {
        return data;
      }
    } catch (error) {
      console.error(error);
    }
  };

  //打开添加变量的弹窗
  add = () => {
    const addModal = Modal.open({
      title: '添加变量',
      width: 600,
      content: (
        <VarAdd
          actionType='add'
          freshQueryList={this.freshQueryList}
          getVarList={this.getVarList}
          closeModal={() => Modal.close(addModal)}
        />
      ),
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  edit = (record) => {
    const { varList } = this.state;
    const addModal = Modal.open({
      title: '编辑变量',
      width: 600,
      content: (
        <VarAdd
          varList={varList}
          record={record}
          freshQueryList={this.freshQueryList}
          getVarList={this.getVarList}
          actionType='update'
          closeModal={() => Modal.close(addModal)}
        />
      ),
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  getSearchList = () => {
    const { varList } = this.state;
    return [
      {
        name: 'projectName',
        component: <Input placeholder='项目名称' />,
      },
      {
        name: 'name',
        component: <Input placeholder='变量名称' />,
      },
      {
        name: 'type',
        component: (
          <Select placeholder='变量类型'>
            {VARS_TYPE_LIST.map((it) => (
              <Select.Option value={it.value} key={it.value}>
                {it.label}
              </Select.Option>
            ))}
          </Select>
        ),
      },
      {
        name: 'categoryCode',
        component: (
          <Select placeholder='变量分类'>
            {varList.map((it) => (
              <Select.Option value={it.code} key={it.code}>
                {it.name}
              </Select.Option>
            ))}
          </Select>
        ),
      },
      {
        name: 'createBy',
        component: <Input placeholder='创建人' />,
      },
      {
        name: 'updateBy',
        component: <Input placeholder='修改人' />,
      },
    ];
  };

  //打开变量分类的弹窗
  handleSort = () => {
    const sortModal = Modal.open({
      title: '变量分类',
      width: '1000px',
      content: <Sort closeModal={() => Modal.close(sortModal)} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  getColumns = () => {
    const { orgList } = this.props;
    return [
      {
        title: '机构',
        key: 'orgCode',
        dataIndex: 'orgCode',
        ellipsis: true,
        width: 140,
        render: (text) => {
          const name = getFeildByTreeData({
            tree: orgList,
            souceVal: text,
          }).name;
          return (
            <Tooltip title={text} placement='topLeft'>
              {name}
            </Tooltip>
          );
        },
      },
      {
        title: '项目',
        key: 'projectName',
        width: 120,
        dataIndex: 'projectName',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '变量名称',
        key: 'name',
        dataIndex: 'name',
        width: 120,
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '变量code',
        key: 'code',
        dataIndex: 'code',
        width: 120,
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '变量分类',
        key: 'categoryName',
        dataIndex: 'categoryName',
        ellipsis: true,
        width: 120,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '变量类型',
        key: 'type',
        width: 120,
        dataIndex: 'type',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '数据类型',
        key: 'dataType',
        dataIndex: 'dataType',
        width: 120,
        ellipsis: true,
      },
      {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        ellipsis: true,
      },
      {
        title: '修改时间',
        dataIndex: 'updateAt',
        width: 140,
        key: 'updateAt',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'createBy',
        width: 140,
        key: 'createBy',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.updateBy
            ? `${record.createBy}/${record.updateBy}`
            : `${record.createBy}/${record.createBy}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div>
        <SearchBar
          searchList={this.getSearchList()}
          query={this.freshQueryList}
          onChange={this.refreshFilter}
          reset={this.resetListAndSearch}
        />
        <div className='inner-content'>
          <Row type='flex' justify='space-between' align='middle' className='pb-10'>
            <Col span={6} style={{ textAlign: 'middle' }}>
              <Button type='primary' onClick={this.add.bind(this, { title: '添加变量' })}>
                添加变量
              </Button>
              <Button className='ml-10' onClick={this.handleSort}>
                变量分类
              </Button>
            </Col>
          </Row>
          <ListsComponent
            {...this.state}
            rowKey='id'
            edit={this.edit}
            scroll={{ x: true }}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    orgList: state.global.orgList,
  };
}

export default VarIndex;
